<template>
  <div style="width: 100%; height: 100%">
    <div ref="earthContainer" style="width: 100%; height: 100%"></div>
    <!-- 3d消息弹窗 -->
    <cesiumMsgbox
      v-for="item in msgboxarr"
      :diahtml="item.diahtml"
      :options="item.options"
      :key="item.uid"
    />

    <el-popover
      placement="top-start"
      width="600"
      trigger="click"
      style="position: absolute;top: 100px;left: 20px;"
    >
      <div style="text-align: left;">
        <el-divider>操作</el-divider>
        <!-- <el-card style> -->
        <el-button type="primary" @click="flyto">飞到阀门</el-button>
        <el-button type="primary" @click="flyaround">绕点旋转</el-button>
        <el-button type="primary" @click="iflujing = !iflujing; lujing(iflujing)">路径播放</el-button>
        <el-button type="primary" @click="_earth.cameraViewManager.views[2].flyTo()">默认视角</el-button>
        <el-button type="primary" @click="_earth.cameraViewManager.views[3].flyTo()">地下视角</el-button>
        <!-- </el-card> -->
      </div>

      <div slot="reference">
        <i class="el-icon-setting" style="cursor: pointer;font-size: 30px;color: chartreuse;"></i>
      </div>
    </el-popover>

    <el-card class="box-card" style="position: absolute;top: 200px;left: 20px;" v-if="iflujing">
      <el-button type="primary" @click="playing = !playing">播放/暂停</el-button>
      <el-divider></el-divider>
      <el-button type="primary" @click="_earth.cameraViewManager.views[1].flyTo()">顶部视角</el-button>
      <el-divider></el-divider>
      <el-button type="primary" @click="cameraAttachedClick">相机绑定</el-button>
      <el-divider></el-divider>
      <span @click="show = !show" class="checkbox">
        <input class="fly" type="checkbox" v-model="show" />路径显隐
      </span>
      <el-divider></el-divider>
      <span>当前速度: {{ currentSpeed }}m/s</span>
      <el-divider></el-divider>
      <span>
        <input type="range" min="0" max="100" step="1" v-model.number="currentSpeed" />
      </span>
      <el-divider></el-divider>
      <span>当前位置：{{currentD | numFilter}}米</span>
    </el-card>
  </div>
</template>

<script>
import scene from "./scene.json";

import axios from "axios";
import cesiummixins from "@/mixins/bigScreen/threeDimensional/cesiumMixins";

import gongre from "../mixins/3d/geojson/3dgongre";
import nengxiao from "../mixins/3d/geojson/3dnengxiao";
import erci from "../mixins/3d/geojson/erci";

// 1 创建Earth的vue组件
export default {
  components: {
    // efficcom
  },
  mixins: [cesiummixins, gongre, nengxiao, erci],
  filters: {
    numFilter(value) {
      // 截取当前数据到小数点后两位
      let realVal = parseFloat(value).toFixed(2);
      return realVal;
    }
  },
  data() {
    return {
      iflujing: false,
      //地球
      _earth: undefined,
      _viewer: undefined,
      //geojson数据源
      ds: [],
      //照相机高度
      camheight: 0,
      //3d消息弹窗
      msgboxarr: [],
      //pin id数组
      pinarr: []
    };
  },
  // 1.1 资源创建
  mounted() {
    this.$message({
      type: "success",
      message:
        "鼠标左键单击拖动地图，鼠标滚轮缩放层级，单击中间滚轮不放拖动（或按住ctrl+鼠标左键拖动）调节视角。w，s，a，d，控制前后左右；q，e，视角左右旋转；r，f，调节高低。",
      showClose: true,
      duration: 10000
    });
    if (typeof XE !== "undefined") {
      this.createEarth(this);
    } else if (typeof Cesium !== "undefined") {
      this.createCesium(this);
    }
    this.loadData();

    this.erci();

    this._earth.cameraViewManager.views[4].flyTo();
  },

  watch: {
    "$store.state.daping.scencetype": {
      handler: function(n, o) {
        //清空数据
        this.destoryds();
        //加载数据
        switch (n) {
          case "nengxiao":
            this.nengxiao();
            break;
          case "gongre":
            this.gongre();
            break;
          default:
            break;
        }
      }
      // immediate: true,
    }
  },

  methods: {
    gethuduro(rotation) {
      return [
        (rotation[0] * Math.PI) / 180.0,
        (rotation[1] * Math.PI) / 180.0,
        (rotation[2] * Math.PI) / 180.0
      ];
    },
    gethudu(position) {
      return [(position[0] * Math.PI) / 180.0, (position[1] * Math.PI) / 180.0];
    },
    flyto() {
      this._earth.cameraViewManager.views[0].flyTo();
    },
    flyaround() {
      this._earth.camera.flyAround(
        [(116.4424863 * Math.PI) / 180, (39.8420112 * Math.PI) / 180, 6],
        1000,
        [(360.0 * Math.PI) / 180, (-22 * Math.PI) / 180, 0],
        0.5,
        0.1
      );
    },
    loadData() {
      let _this = this;
      //加载场景
      this._earth.xbsjFromJSON(scene);
      this.$root._earth = this._earth;
      //加载FPS调试
      this._viewer.scene.debugShowFramesPerSecond = true;
    },

    zoomed() {
      let _this = this;
      this.camheight = Math.ceil(
        this._viewer.camera.positionCartographic.height
      );
    },

    destoryds() {
      let _this = this;
      //清理msgbox
    },

    createEarth(comp) {
      //创建地球
      let earth = new XE.Earth(comp.$refs.earthContainer);
      this._earth = earth;
      this._viewer = earth.czm.viewer;
    },
    createCesium(comp) {
      window.viewer = new Cesium.Viewer(comp.$refs.earthContainer);
    }
  },

  // 1.2 资源销毁
  beforeDestroy() {
    // vue程序销毁时，需要清理相关资源
    this._earth = this._earth && this._earth.destroy();
  }
};
</script>

<style lang="scss">
.cesiumdialog {
  position: absolute;
  width: 180px;
  min-height: 200px;
  color: white;
  background-image: url("/configuration/cesium/dialog.png");
  background-size: 100% 100%;
  padding: 5px;
  border-radius: 5px;
  // cursor: pointer;
}
.cesium-performanceDisplay {
  position: absolute;
  top: 50%;
  left: -1000px;
}
</style>